<template>
  <div class="jyzt">
    <el-row :gutter="15">
      <el-col :sm="8" :lg="8">
        <el-card v-loading="loadingleft" element-loading-text="Loading..." element-loading-background="#178af01a">
          <div class="center-title">
            <div style="width: 300px">{{ title }}排行榜</div>
            <!-- clearable -->
            <el-select v-model="queryParamsleft.nf" class="customSelct" popper-class="countyprop" :popper-append-to-body="true" @change="onNdChange">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
            <!-- <el-select v-model="nd" class="customSelct" popper-class="countyprop" clearable :popper-append-to-body="true" @change="onNdChange">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select> -->
          </div>
          <el-table class="zylbTable" :row-class-name="tableRowClassName" :highlight-current-row="false" :data="pmtable" style="width: 100%">
            <el-table-column prop="pm" width="60px" label="排名" />
            <el-table-column prop="hzxm" label="姓名" />
            <el-table-column prop="jf" label="积分">
              <template #default="scope">
                <div>当前积分:{{ scope.row.jf }}分</div>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
      <el-col :sm="16" :lg="16">
        <el-card v-loading="loading" element-loading-text="Loading..." element-loading-background="#178af01a">
          <div class="center-title">{{ title }}表</div>
          <el-form ref="queryFormRef" :model="queryParams" :inline="true" class="queryForm" label-width="80px">
            <el-form-item label="户主姓名" prop="hzxm">
              <el-input v-model="queryParams.hzxm" placeholder="请输入姓名" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="网格" prop="wgxz">
              <el-input v-model="queryParams.xz" placeholder="请选择网格" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item v-if="path == '/jfdh'" label="兑换月份" prop="name">
              <el-select v-model="queryParams.yf" class="formSelct" popper-class="countyprop" clearable placeholder="请选择月份" style="width: 120px">
                <!--  @change="formKeyChange" -->
                <el-option v-for="item in yfList" :key="item.label" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button sfzh="primary" icon="Search" @click="handleQuery">查询</el-button>
              <!-- <el-button sfzh="primary" icon="Search" @click="handleQuery">导出</el-button> -->
            </el-form-item>
          </el-form>
          <el-table
            v-if="props.path == '/jfph'"
            class="zylbTable"
            :row-class-name="tableRowClassName"
            :highlight-current-row="false"
            :data="tableData"
            style="width: 100%"
          >
            <el-table-column prop="id" label="序号" />
            <el-table-column prop="hzxm" label="户主姓名" />
            <el-table-column prop="sfzh" show-overflow-tooltip label="身份证号码" />
            <el-table-column width="120px" prop="xz" label="网络（小组）" />
            <el-table-column prop="zjf" label="总分值" />
            <el-table-column prop="ydhjf" label="已兑换积分" />
            <el-table-column prop="syjf" label="剩余积分" />
          </el-table>
          <el-table
            v-if="props.path == '/jfdh'"
            class="zylbTable"
            :row-class-name="tableRowClassName"
            :highlight-current-row="false"
            :data="tableData"
            style="width: 100%"
          >
            <el-table-column prop="id" label="序号" />
            <el-table-column prop="hzxm" label="户主姓名" />
            <el-table-column prop="sfzh" show-overflow-tooltip label="身份证号码" />
            <el-table-column width="120px" prop="wgxz" label="网络（小组）" />
            <el-table-column prop="dhfz" label="兑换分值" />
            <el-table-column prop="dhfs" label="兑换方式" />
            <el-table-column prop="dhr" label="兑换人" />
            <el-table-column width="110px" prop="dhsj" label="兑换时间" />
            <el-table-column prop="dhwp" label="兑换物品" />
          </el-table>
          <el-pagination
            v-model:current-page="queryParams.pageNum"
            v-model:page-size="queryParams.pageSize"
            :total="queryParams.total"
            background
            class="pagination"
            layout="prev, pager, next"
            @current-change="handleCurrentChange"
          />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import useMapStore from '@/store/modules/map';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const $szxcapi = (proxy as any)?.$szxcapi;
const loading = ref(false);
const loadingleft = ref(false);
const props = defineProps({
  path: {
    type: String,
    default: ''
  }
});
const queryParamsleft = ref({
  pageNum: 1,
  pageSize: 10,
  total: 0,
  nf: '',
  flag: ''
});
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  total: 0,
  nf: '',
  hzxm: '',
  xz: '',
  yf: ''
});
const nd = ref('');
const title = ref('');
const tableRowClassName = ({ row, rowIndex }: { row; rowIndex: number }) => {
  if (rowIndex % 2 == 0) {
    return 'js-row';
  } else {
    return 'sz-row';
  }
};
const options = ref([]);
const tableData = ref([]);
const pmtable = ref([]);
const onNdChange = (value) => {
  console.log('年度发生变化');
  queryParams.value.nf = value;
  queryParamsleft.value.nf = value;
  init(true);
  initLeft(true);
};
const yfList = ref([]);
const handleCurrentChange = (e) => {
  queryParams.value.pageNum = e;
  init(false);
};
const init = async (flag) => {
  loading.value = true;
  if (flag) {
    queryParams.value.pageNum = 1;
  }
  const params = {
    'ssc': useMapStore().szxcCountryText,
    ...queryParams.value
  };
  let data;
  if (props.path == '/jfph') {
    data = await $szxcapi.jfQuery(params);
  } else {
    data = await $szxcapi.jfdhQuery(params);
  }
  tableData.value = data.rows;
  queryParams.value.total = data.total;
  loading.value = false;
};
const initLeft = async (flag) => {
  loadingleft.value = true;
  if (flag) {
    queryParams.value.pageNum = 1;
  }
  if (props.path == '/jfph') {
    queryParamsleft.value.flag = '0';
  } else {
    queryParamsleft.value.flag = '3';
  }
  const params = {
    'ssc': useMapStore().szxcCountryText,
    ...queryParamsleft.value
  };
  const data = await $szxcapi.jfphQuery(params);
  pmtable.value = data.rows;
  queryParams.value.total = data.total;
  loadingleft.value = false;
};
onMounted(async () => {
  await nextTick();
  const currentYear = new Date().getFullYear();
  for (let i = 0; i < 6; i++) {
    options.value.push({
      label: `${currentYear - i}年`,
      value: `${currentYear - i}`
    });
  }
  queryParamsleft.value.nf = options.value[0].value;
  queryParams.value.nf = options.value[0].value;
  for (let i = 1; i < 13; i++) {
    yfList.value.push({
      label: `${i}月`,
      value: `${i}`
    });
  }
  init(true);
  initLeft(true);
});
// 查询
const handleQuery = () => {
  init(true);
};
watch(
  () => props.path,
  (val) => {
    if (val == '/jfph') {
      title.value = '年度积分';
    } else {
      title.value = '积分兑换';
    }
    queryParamsleft.value = {
      pageNum: 1,
      pageSize: 10,
      total: 0,
      nf: queryParamsleft.value.nf,
      flag: ''
    };
    queryParams.value = {
      pageNum: 1,
      pageSize: 10,
      total: 0,
      nf: queryParams.value.nf,
      hzxm: '',
      xz: '',
      yf: ''
    };
    init(true);
    initLeft(true);
  },
  {
    // immediate: true,
    deep: true
  }
);
</script>

<style lang="scss" scoped>
.jyzt {
  width: 100%;
  height: 100%;
  font-family: 'DingTalk';
  .center-title {
    font-weight: 700;
    font-size: 20px;
    color: white;
    margin-bottom: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .el-card {
    max-height: calc(90vh - 200px) !important;
    background: #178af01a;
    border: none;
    overflow: hidden auto;
    .el-pagination {
      margin-top: 10px;
      display: flex;
      justify-content: flex-end;
    }
  }
}
.zylbTable,
::v-deep.el-table {
  background-color: transparent;
  thead,
  tr,
  th.el-table__cell {
    font-size: 16px;
    text-align: center;
    color: #fff;
    padding: 0;
    height: 30px;
    background-color: #178af01a !important;
    border: 0px;
  }
  .el-table__body {
    .el-table__cell {
      cursor: pointer !important;
      text-align: center;
      padding: 0;
      border-bottom: 1px solid rgba(188, 227, 255, 0.49);
      border-image: linear-gradient(transparent, rgba(188, 227, 255, 0.9), transparent) 5 5;
    }
  }

  .el-table__body tr:hover > td.el-table__cell {
    background-color: transparent !important;
  }

  .el-table__inner-wrapper:before {
    background-color: transparent !important;
  }
}
.el-form--inline {
  .el-form-item {
    margin-right: 20px;
  }
  :deep(.el-input) {
    width: 120px;
    .el-input__inner {
      font-family: 'DingTalk';
    }
  }
}
</style>
